<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-customized-scatter-menu',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'radar'
    }
  },

  computed: {
    option () {
      let vm = this
      let datas = []
      for (let i = 0; i < this.data.length; i++) {
        let item = this.data[i]
        if (vm.showValue) {
          datas.push({
            name: item.name,
            value: item.offset,
            symbolSize: item.symbolSize,
            label: {
              normal: {
                formatter: function (params) {
                  let a = vm.data.find(itm => itm.name === params.name)

                  if (a.label1 && a.label2) {
                    return a.name + '\n' + '{a|' + a.label1 + '\n' + a.label2 + '}'
                  } else if (a.label1) {
                    return a.name + '\n' + '{a|' + a.label1 + '}'
                  } else if (a.label2) {
                    return a.name + '\n' + '{a|' + a.label2 + '}'
                  }

                  return a.name
                },
                rich: {
                  a: {
                    fontSize: item.labelFontSize ? item.labelFontSize : '',
                    color: '#fff'
                  }
                },
                textStyle: {
                  fontSize: item.fontSize,
                  fontWeight: item.fontWeight,
                  lineHeight: item.lineHeight
                }
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: vm.colors[2 * i]
                }, {
                  offset: 1,
                  color: vm.colors[2 * i + 1]
                }]),
                opacity: item.opacity
              }
            },
          })
        } else {
          datas.push({
            name: item.name + '\n' + item.value,
            value: item.offset,
            symbolSize: item.symbolSize,
            label: {
              normal: {
                textStyle: {
                  fontSize: item.fontSize,
                  fontWeight: item.fontWeight,
                  lineHeight: item.lineHeight
                }
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: vm.colors[2 * i]
                }, {
                  offset: 1,
                  color: vm.colors[2 * i + 1]
                }]),
                opacity: item.opacity
              }
            },
          })
        }
	    }


      return {
        color: this.colors,
        grid: {
	        show: false,
	        top: 10,
	        bottom: 10
        },
        xAxis: [{
	        gridIndex: 0,
	        type: 'value',
	        show: false,
	        min: 0,
	        max: 100,
	        nameLocation: 'middle',
	        nameGap: 5
        }],
        yAxis: [{
	        gridIndex: 0,
	        min: 0,
	        show: false,
	        max: 100,
	        nameLocation: 'middle',
	        nameGap: 30
        }],
        series: [{
	        type: 'effectScatter',
	        // symbol: 'circle',
	        // symbolSize: 120,

	        hoverAnimation: true,
	        label: {
            normal: {
              show: true,
              formatter: '{b}',
              color: '#fff',
              textStyle: {
                fontSize: '20'
              }
            },
	        },
	        itemStyle: {
	          normal: {
	            color: '#00acea'
	          }
	        },
	        data: datas
	      }]
      }
    }
  },

  methods: {
    setSeries () {
      // console.log(this.option)
    },
    setOption () {
      if (this.data.length > 0) {
        this.chart.setOption(this.option, true)
        if (this.useLiandong) {
          this.chart.off('click')
          this.chart.on('click', this.handleclick)
        }
        this.resize()
      }
    },
    handleclick (params) {
      if (params.componentType === 'radar') {
        this.$emit('input', params.name)
        this.$emit('change', params.name)
      }
    },
  },

  watch: {
    seriesIsRow () {
      this.setSeries()
    },

    isSmooth () {
      this.setSeries()
    },

    areaStyle () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
